import React, { Component, useRef, useState } from 'react'
import avatar from '../images/avatar.png'; // 导入图片

export const Porm = (props) => {
  const [txt, setText] = useState('')
  const txtRef = useRef(null)
  const handleTxtChange = (e) => {
    setText(e.target.value)
  }
  const handleSubmit = () => {
    props.handleAddComment(txt)
    setText('')
    // 把焦点设置到评论输入框
    txtRef.current.focus();
  }

  return (
    <div className="comment-send-container">
      <div>
        <img className="user-head" src={avatar} alt="头像" />
      </div>
      <div className="comment-send">
        <div className="textarea-container">
          <textarea
            ref={txtRef}
            cols="80"
            rows="5"
            placeholder="发条友善的评论"
            value={txt}
            onChange={handleTxtChange}
            className="ipt-txt"
          />
          <button
            className="comment-submit"
            onClick={handleSubmit}
          >
            发表评论
          </button>
        </div>
        <div className="comment-emoji">
          <i className="face"></i>
          <span className="text">表情</span>
        </div>
      </div>
    </div>
  )
}


// export class Porm extends Component {
//   state = {
//     // 评论框输入
//     txt: '',
//   }
//   // 表单ref
//   txtRef = React.createRef();
//   // 评论输入变化
//   handleTxtChange = (e) => {
//     this.setState({
//       txt: e.target.value,
//     });
//   };
//   handleSubmit = () => {
//     this.props.handleAddComment(this.state.txt)
//     this.setState({
//       txt: ''
//     })
//     // 把焦点设置到评论输入框
//     this.txtRef.current.focus();
//   }

//   render() {
//     // console.log(this.state.txt);
//     return (
//       <div className="comment-send-container">
//         <div>
//           <img className="user-head" src={avatar} alt="头像" />
//         </div>
//         <div className="comment-send">
//           <div className="textarea-container">
//             <textarea
//               ref={this.txtRef}
//               cols="80"
//               rows="5"
//               placeholder="发条友善的评论"
//               value={this.state.txt}
//               onChange={this.handleTxtChange}
//               className="ipt-txt"
//             />
//             <button
//               className="comment-submit"
//               onClick={this.handleSubmit}
//             >
//               发表评论
//             </button>
//           </div>
//           <div className="comment-emoji">
//             <i className="face"></i>
//             <span className="text">表情</span>
//           </div>
//         </div>
//       </div>
//     )
//   }
// }
